<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8">

		<!-- !Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>01_JavaScript_变量</title>
		<meta name="description" content="">
		<meta name="author" content="chenyong">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		
		<style type="text/css">
			
			
			body{
				margin:50px;
			}
			
			div{
				font-size:12px;
			}
			
			div.box{
				margin-top:30px;
			}
		
			
		</style>
		
		<script type="text/javascript">
			
			//类型初始化
			function fn1() {
				var a = 20;
				alert(a);
				a = "转化成文字";
				alert(a);
			}
			
			
			//查看变量类型 
			function fn2(){
				var a = 10;
				var b = "str";
				var c= new Array(1,3,4,13);
				var d = new Date();
				alert("Number:" + typeof a 
				 + "\nString:" + typeof b
				 + "\nArray:" + typeof c
				 + "\nDate:" + typeof d
				 );
				 
				 //判断是否是Array对象
				 alert(c instanceof Array);
			}
			
			//变量类型转化
			function fn3(){
				var a = "10";
				alert("转换前type of \"10\":" + typeof a);
				a = Number(a);
				alert("转换后type of Number(\"10\"):" + typeof a);
				
				//通过Number()进行强制类型转化,如果转化失败会得到NaN（Not a Number）
				var b = "abc";
				b = Number(b);
				alert("Number(\"abc\"):" + b);
				
				var c = "12px";
				c = Number(c);
				alert("Number(\"12px\"):" + c);
				
				//12px这样的字符串不能通过Number()转化,但可以使用parseInt转换
				var d = "12px"; 
				d = parseInt(d);
				alert("parseInt(\"12px\")" + d);
			}
			
			//布尔类型 在JS中只要不等于0就是true 
			function fn4()
			{
				//!!将数值转化为boolean类型
				var zero = !!0;
				//上面语句等价于var zero = 0 || false;
				alert("0转成boolean：" + zero);
				
				var a = -1;
				alert("-1转成boolean：" + !!a);
				
				var b;
				alert(b + "转化成boolean：" + !!b);
				
				var c = Number("abc");
				alert(c + "转化成boolean：" + !!c);
			}
			
		</script>
	</head>
	
	<body>
		
		<h3>01_JavaScript_变量</h3>
		
		<div class="box">
			<p><b>初始化变量</b></p>
			<p>对于JavaScript而言，创建时不需要指定数据类型，全部使用var来创建</p>
			<p>对于一个变量的对象，初始化以后也可以转化成期他类型的</p>
			<button onclick="fn1()">测试fn1()</button>
		</div>
		
		<div class="box">
			<p><b>查看类型</b></p>
			<p>JavaSrcipt主要的变量类型有Number，String，Array，Date</p>
			<p>变量类型可以通过typeof来查看</p>
			<p>Array和Date都显示为Object，但是可以通过instanceof Array|Date 来判断是否为指定类型，返回结果为布尔类型</p>
			<button onclick="fn2()">测试fn2()</button>
		</div>
		
		<div class="box">
			<p><b>变量类型转化</b></p>
			<p>通过Number()进行强制类型转化,如果转化失败会得到NaN（Not a Number）</p>
			<p>12px这样的字符串不能通过Number()转化,但可以使用parseInt转换</p>
			<button onclick="fn3()">测试fn3()</button>
		</div>
		
		<div class="box">
			<p><b>布尔类型 </b></p>
			<p>!!将数值转化为boolean类型</p>
			<p>在JS中正常数值只要不等于0就是true</p>
			<p>0、undefined和NaN转化结果也是false </p>
			<button onclick="fn4()">测试fn4()</button>
		</div>
	</body>
	
</html>